<template>
  <div class="page-card">
    <div class="page-header">
      <a-page-header :title="pageTitle" :breadcrumb="{ props: { routes } }">
        <template #subTitle>
          <slot name="subTitle"></slot>
        </template>
        <template #extra>
          <slot name="extra"></slot>
          <slot name="action"></slot>
        </template>
        <template #footer v-if="$slots.footer">
          <slot name="footer"> </slot>
        </template>
      </a-page-header>
    </div>
    <component :is="card ? 'a-card' : 'div'" class="page-content">
      <slot></slot>
    </component>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    breadcrumb: {
      type: Array,
      default: () => [],
    },
    card: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    routes() {
      let preLen = 0;
      return this.$route.matched
        .filter((route) => route.meta.breadcrumb !== false)
        .map((route) => {
          const newItem = {
            key: route.name,
            path: route.path.substr(preLen),
            breadcrumbName: route.meta.title || route.name,
          };
          preLen = route.path.length;
          return newItem;
        });
    },
    pageTitle() {
      const { meta = {}, name } = this.$route;
      return this.title || meta.title || name;
    },
  },
};
</script>

<style lang="less" scoped>
.page-header {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  margin: -20px -20px 20px;
}
.page-content {
  min-height: 65vh;
  position: relative;
}
</style>